<template>
  <div style="padding: 20px">
    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="createApply">发起申请</vxe-button>
      </template>
    </vxe-toolbar>
    <div style="overflow: hidden; width: 100%">
      <vxe-table border :data="tableData">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="building_name" title="楼"></vxe-column>
        <vxe-column field="old_garden_name" title="迁移前网格"></vxe-column>
        <vxe-column field="new_garden_name" title="迁移后网格"></vxe-column>
        <vxe-column field="create_time" title="申请时间"></vxe-column>
        <vxe-column field="examine_type" title="申请状态">
          <template v-slot="{ row }">
            <span v-show="row.examine_type === '0'">等待系统处理</span>
            <span v-show="row.examine_type === '1'">系统处理中</span>
            <span v-show="row.examine_type === '2'">系统处理完成</span>
            <span v-show="row.examine_type === '3'">系统处理失败</span>
          </template>
        </vxe-column>
        <vxe-column field="begin_time" title="数据处理开始时间"></vxe-column>
        <vxe-column field="end_time" title="数据处理结束时间"></vxe-column>
      </vxe-table>
    </div>
    <Row type="flex" justify="end" class="page_style">
      <Page
        :current="params.pageNo"
        :total="params.totalRecord"
        show-sizer
        :page-size="params.pageSize"
        show-elevator
        @on-change="pageAction"
        @on-page-size-change="pageSizeChange"
      />
    </Row>
    <Modal width="800" v-model="applyModal" title="发起申请" @on-ok="applyModalConfirm">
      <Form :model="formItem" :label-width="120">
        <Row>
          <Col span="12">
            <FormItem label="迁移前网格">
              <Select
                v-model="formItem.old_garden_id"
                @on-change="findBuildingList(formItem.old_garden_id)"
              >
                <Option
                  v-for="(item,index) in GardenList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="迁移后网格">
              <Select v-model="formItem.new_garden_id">
                <Option
                  v-for="(item,index) in GardenList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="迁移楼">
          <Select v-model="formItem.building_id">
            <Option v-for="(item,index) in BuildingList" :key="index" :value="item.id">{{item.name}}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import {
  createCommunityApply,
  findCommunityApplyList,
  findCommunityXJList,
  findGardenXJList
} from '../../../api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      severUserInfo: {},
      formItem: {},
      tableData: [],
      applyModal: false,
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      GardenList: [],
      BuildingList: []
    }
  },
  methods: {
    init () {
      this.findTableList()
    },
    findTableList () {
      let data = this.params
      findCommunityApplyList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableData = ret.data.data.results
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    createApply () {
      console.log('123')
      this.findGardenList()
      this.applyModal = true
    },
    pageAction (page) {
      this.params.pageNo = page
      this.findTableList()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findTableList(this.params.pageNo)
    },
    findGardenList () {
      let data = {
        id: this.severUserInfo.company_id
      }
      findCommunityXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GardenList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findBuildingList (e) {
      let data = {
        id: e
      }
      findGardenXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.BuildingList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    applyModalConfirm () {
      let data = {
        old_garden_id: this.formItem.old_garden_id,
        new_garden_id: this.formItem.new_garden_id,
        building_id: this.formItem.building_id
      }
      createCommunityApply(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '提交成功', desc: ret.data.errmsg })
          this.findTableSearch()
        } else {
          this.$Notice.error({ title: '提交失败', desc: ret.data.errmsg })
        }
      })
    },
    findTableSearch () {
      this.params.pageNo = 1
      this.findTableList()
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
  }
}
</script>

<style scoped>
.page_style {
  margin: 20px 5px;
}
</style>
